<template>
  <Modal cancel-text="取消" ok-text="确定" @cancel="close" @ok="handleOk" :visible="visible" title="开始节点属性">
    <Section title="开发配置">
      <RowWrapper>
        <div style="padding-right: 5px">开始前监听:</div>
        <ListenerSelector v-model="startNodeBeforeListener" :service="service" style="flex: 1"
                          listenerType="startNodeBeforeListener" :flowModelInstance="flowModelInstance"/>
      </RowWrapper>

      <RowWrapper style="margin-top: 10px">
        <div style="padding-right: 5px">开始后监听:</div>
        <ListenerSelector v-model="startNodeAfterListener" :service="service" style="flex: 1"
                          listenerType="startNodeAfterListener" :flowModelInstance="flowModelInstance"/>
      </RowWrapper>
    </Section>
  </Modal>
</template>
<script>
import {Modal} from 'ant-design-vue';
import RowWrapper from '@/components/flow/layout/RowWrapper.vue';
import ListenerSelector from '@/components/flow/ListenerSelector/ListenerSelector.vue';
import Section from '@/components/Section/Section.vue';

export default {
  name: 'StartNodeConfiguration',
  components: {
    Section,
    ListenerSelector,
    RowWrapper,
    Modal
  },
  props: {
    service: {
      type: Function,
      default: () => undefined
    },
    startNode: {
      type: Object,
      default: () => ({})
    },
    flowModelInstance: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      startNodeBeforeListener: undefined,
      startNodeAfterListener: undefined,
    };
  },
  methods: {
    open() {
      this.startNodeBeforeListener = this.startNode.beforeEnterListeners;
      this.startNodeAfterListener = this.startNode.afterEnterListeners;
      this.visible = true;
    },
    handleOk() {
      this.startNode.beforeEnterListeners = this.startNodeBeforeListener;
      this.startNode.afterEnterListeners = this.startNodeAfterListener;
      this.$emit('ok', this.startNode);
      this.close();
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
  }
};
</script>